<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <p>局部变量在声明的函数内可以访问。</p>
        <p id="demo"></p>
        <script>
            myFunction();
            document.getElementById("demo").innerHTML =
                "我可以显示 " + typeof carName;
            function myFunction() {
                var carName = "Volvo";
            }
        </script>
        <!-- js局部作用域 -->
    </div>
    <hr />
    <div>
        <p>全局变量在任何脚本和函数内均可访问。</p>
        <p id="demo"></p>
        <script>
            var carName = "Volvo";
            myFunction();
            function myFunction() {
                document.getElementById("demo").innerHTML =
                    "我可以显示 " + carName;
            }
        </script>
        <!-- js全局变量 -->
    </div>
    <hr />
    <div>
        <p>
            在 HTML 中, 所有全局变量都会成为 window 变量。
        </p>
        <p id="demo"></p>
        <script>
            myFunction();
            document.getElementById("demo").innerHTML =
                "我可以显示 " + window.carName;
            function myFunction() {
                carName = "Volvo";
            }
        </script>
        <!-- html中的全局变量 -->
    </div>
</body>

</html>